<template>
  <div class="go-items-list">
    <!-- 加载 -->
    <div v-show="loading">
      <go-loading></go-loading>
    </div>
    <!-- 列表 -->
    <div v-show="!loading">
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="companyName" label="公司名称" />
        <el-table-column prop="username" label="账号" />
        <!-- <el-table-column prop="projectNum" label="项目数" /> -->
        <!-- <el-table-column prop="status" label="状态" /> -->
        <el-table-column prop="createTime" label="创建日期" />
        <el-table-column fixed="right" label="操作" width="140">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" size="small" @click="deleteHandle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <!-- <div class="list-pagination">
      <n-pagination
        :page="paginat.page"
        :page-size="paginat.limit"
        :item-count="paginat.count"
        :page-sizes="[12, 24, 36, 48]"
        @update:page="changePage"
        @update:page-size="changeSize"
        show-size-picker
      />
    </div> -->
  </div>


  <company-modal-card
    v-if="modalData"
    :modalShow="modalShow"
    :modalData="modalData"
    @close="closeModal"
  ></company-modal-card>
</template>

<script setup lang="ts">
import { useDataListInit } from './hooks/useData.hook'
import { useModalDataInit } from '@/components/CreateCompanyModal/hook'
import CompanyModalCard from '@/components/CreateCompanyModal/index.vue'

const { modalData, modalShow, closeModal } = useModalDataInit()
const { loading, paginat, list, changeSize, changePage, deleteHandle } = useDataListInit()

function onEdit(row: any) {
  modalShow.value = true
  modalData.value = {
    userID: row.userID,
    companyName: row.companyName,
    username: row.username,
    password: ''
  }
}
</script>

<style lang="scss" scoped>
$contentHeight: 250px;
@include go('items-list') {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - #{$--header-height} - 40px - 2px);
  .list-content {
    position: relative;
    height: $contentHeight;
  }
  .list-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
